<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="container">
				<view class="top-content">
					<view class="brand-bgtop">
						<image :src="brandinfo.logo" mode="aspectFill"></image>
					</view>
					<view class="brand-info">
						<view class="business">
							<view class="bus-left">
								<image class="avatar" :src="brandinfo.logo" mode="aspectFill"></image>
								<view class="auth">
									<view class="nickname">{{brandinfo.title}}</view>
									<view class="attestation" @click="authusr(brandinfo.auth)">
										<image src="/static/image/lotteryBrand.png" :class="[brandinfo.auth !=2?'unauth':'']" mode="aspectFill"></image>
										<view class="authtext">{{brandinfo.auth==2?'已':'未'}}认证</view>
									</view>
								</view>
							</view>
							<view class="bus-right">
								<navigator :url="'/pages/brand/brand?id='+brandinfo.contact.member_id" v-if="is_self" class="iconfont">&#xe62d;</navigator>
								<!-- <view class="subscribe">
									<text class="add">+</text>订阅
								</view> -->
							</view>
						</view>
					</view>
					<!--简介-->
					<view class="intro">
						<view class="desc">简介：{{brandinfo.introduction}} </view>
						<!-- <navigator :url="'/pages/brand/brand?id='+brandinfo.contact.member_id" v-if="is_self" class="iconfont">&#xe62d;</navigator> -->
					</view>
					<!--抽奖统计-->
					<view class="statistics">
						<view class="counts">
							<view class="count-item">
								<view class="count-num">{{brandinfo.lottery_count}}</view>
								<view class="count-title">发起抽奖数</view>
							</view>

							<view class="count-item">
								<view class="count-num">{{brandinfo.lottery_people}}</view>
								<view class="count-title">参与抽奖数</view>
							</view>

							<view class="count-item">
								<view class="count-num">{{brandinfo.views}}</view>
								<view class="count-title">浏览人数</view>
							</view>
						</view>
						<!--联系方式-->
						<view class="contact">
							<view class="men">
								<view class="iconfont">&#xe640;</view>
								<text>{{brandinfo.contact.attention_text}}</text>
							</view>
							<!--点击关注-->
							<view class="button" @click="gotoaddwechat">{{brandinfo.contact.scan_code>0?'联系我们':'一键复制'}}</view>
						</view>
					</view>
				</view>
				<!--正在抽奖模块-->
				<view class="dreawmodel">
					<view class="model-title">
						<view class="des">正在抽奖</view>
						<!-- <navigator v-if="is_self" url="/pages/brand/choicegift?type=being" class="add"><text class="item-add" stye>+</text><text>添加抽奖</text></navigator> -->
					</view>

					<giftmodel :is_self="is_self" :listdata="giftlist.being" v-if="giftlist.being.length>0" :is_main="true"></giftmodel>
					<!--抽奖为空-->
					<view class="addmodel" v-else>
						<!-- <navigator url="/pages/brand/choicegift?type=being" class="item-model" v-if="is_self">
							<text class="jia">+</text>添加正在抽奖
						</navigator> -->
						<view class="bussion-info">商家即将发布抽奖...</view>
					</view>
				</view>
				<!--往期抽奖-->
			<!-- 	<view class="dreawmodel">
					<view class="model-title">
						<view class="des">往期抽奖</view>
						<navigator v-if="is_self" url="/pages/brand/choicegift?type=expired" class="add"><text class="item-add">+</text><text>添加抽奖</text></navigator>
					</view>
					<giftmodel :is_self="is_self" :listdata="giftlist.expired" v-if="giftlist.expired.length>0" :is_main="true"></giftmodel>
			
					<view class="addmodel" v-else>
						<navigator url="/pages/brand/choicegift?type=expired" class="item-model" v-if="is_self">
							<text class="jia">+</text>添加往期抽奖
						</navigator>
						<view class="bussion-info" >等待商家添加抽奖...</view>
					</view>
				</view> -->

				<!--品牌介绍-->
				<view class="dreawmodel">
					<view class="model-title">
						<view class="des">品牌介绍</view>
					</view>
					<view class="intro-content">
						<view style="margin-bottom: 10rpx;line-height: 60rpx;">{{brandinfo.details}}</view>
						<view v-if="brandinfo.images">
							<image v-for="(item,index) in brandinfo.images" :src="item" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 30rpx;"></view>
		</mescroll-body>
		<!--联系客服-->
		<alert modeltitle="联系客服" :visible="contactvisible">
			<view class="contactus">
				<view class="coop-text">
					<text>1、客服热线：0797 822 2955</text>
					<text>2、客服微信号：{{wechat}}</text>
					<text>3、联系邮箱：gzweixu@sina.com</text>
				</view>
				<view class="coop-button">
					<view class="cancel" @tap="contactvisible=false">取消</view>
					<view class="copywechat" @click="copywechats">一键复制微信号</view>
				</view>
			</view>
		</alert>
		<loadingpage v-if="globelloading"></loadingpage>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				wechat: 'TianTianYouLi888',
				contactvisible: false,
				is_self: false,
				giftlist: this.$common.state.dreawshow,
				globelloading: true,
				brandinfo: {
					contact: {
						member_id: '',
					}
				},
				userinfo: '',
				downOption: {
					auto: true,
					autoShowLoading: true,
					textLoading: '玩命加载中...',
					textSuccess: "刷新成功",
				},
				upOption: {
					use: false
				},
				id: '',
			}
		},
		onLoad(option) {
			this.userinfo = uni.getStorageSync('user_info');
			this.id = option.id
			uni.$on("closewindown", (option) => {
				this.contactvisible = option;
			})
		},
		//监听右上角事件
		onNavigationBarButtonTap() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		computed: {
			brandstatu() {
				return this.$common.state.brand
			},
			//往期和正在进行的抽奖
			dreawlist() {
				return this.$common.state.dreawshow
			}
		},
		watch: {
			brandstatu(value) {
				console.log(value);
				this.brandinfo = value;
			},
			brandinfo() {
				this.globelloading = false
				this.mescroll.endSuccess()
			},
			dreawlist(value) {
				this.giftlist = value
			}
		},
		methods: {
			//联系客服
			authusr(authnum) {
				if (authnum != 2) {
					this.contactvisible = true
				}
			},

			copywechats() {
				uni.setClipboardData({
					data: this.wechat,
					success() {
						console.log('success');
					}
				});
			},

			downCallback() {
				this.getdetail(this.id)
			},
			upCallback(page) {

			},

			getdetail(id) {
				console.log(id)
				this.$HttRequest({
					url: '/brand/detail',
					param: {
						id: id
					},
				}).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						this.brandinfo = res.data
						//获取往期和正在进行的抽奖
						this.$common.state.dreawshow = res.data.dreawshow

						//检索是否为用户自己
						if (this.userinfo.id == this.brandinfo.contact.member_id) {
							this.is_self = true
						}
						//console.log(this.$common.state.dreawshow)
						//this.getprizeList()
						this.mescroll.endSuccess();
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					this.mescroll.endErr()
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error)
				});
			},
			//去添加微信
			gotoaddwechat() {
				if (this.brandinfo.contact.scan_code > 0) {
					uni.navigateTo({
						url: '/pages/release/downimg?imgresources=' + this.brandinfo.contact.qr_code
					})
				} else {
					uni.setClipboardData({
						data: this.brandinfo.contact.attention_text,
						success: function() {
							console.log('success');
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.contactus {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		flex: 1;

		.coop-text {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;

			text {
				margin: 10rpx 0;
			}

			.zhuyi {
				margin-top: 40rpx;
				color: #8b8b8b;
			}
		}

		.coop-button {
			width: 100%;
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: space-around;
			margin: 20rpx 0;

			.cancel {
				display: flex;

				align-items: center;
				justify-content: center;
				width: 170rpx;
				height: 75rpx;
				background-color: #e6e6e6;
				color: #808080;
				border-radius: 30rpx;
			}

			.copywechat {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 240rpx;
				height: 75rpx;
				background-color: $uni-color-primary;
				border-radius: 30rpx;
				color: #fff;
			}
		}

	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex-direction: column;

		.dreawmodel {
			background-color: #fff;
			width: 90%;
			margin: 10rpx auto;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.addmodel {
				display: flex;
				width: 500rpx;
				height: 300rpx;
				justify-content: center;
				align-items: center;

				.bussion-info {
					color: #7b7b7b;
					font-size: 28rpx;
				}

				.item-model {
					background-color: #f8f8f8;
					color: #7b7b7b;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10rpx 20rpx;

					.jia {
						margin-right: 10rpx;
						font-weight: bold;
						font-size: 45rpx;
					}
				}
			}

			.model-title {
				padding: 20rpx 0;
				width: 90%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				border-bottom: 1rpx solid #f4f4f4;

				.des {
					font-size: 35rpx;
					font-weight: bold;
				}

				.add {
					color: #999;
					display: flex;
					justify-content: center;
					align-items: center;

					.item-add {
						font-size: 40rpx;
						margin-right: 8rpx;
					}
				}
			}

			.intro-content {
				width: 90%;
				margin: 20rpx auto;
				font-size: 28rpx;

				image {
					width: 610rpx;
				}
			}
		}

		.top-content {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			position: relative;
			flex-direction: column;
			margin-bottom: 10rpx;

			.brand-bgtop {
				overflow: hidden;
				z-index: -1;
				position: absolute;
				width: 100%;
				height: 550rpx;
				left: 0;
				top: 0;
				// background-size: 100% 550rpx;
				// background-repeat:no-repeat;
				image{
					width: 100%;
					height: 550rpx;
					filter: blur(8rpx);
				}
			}

			//统计
			.statistics {
				background-color: #fff;
				width: 90%;
				margin: 0 auto;
				border-radius: 10rpx;

				.contact {
					display: flex;
					width: 90%;
					justify-content: space-between;
					align-items: center;
					font-size: 25rpx;
					margin: 0 auto;
					padding: 30rpx 0;
					color: #57bf7a;

					.men {
						display: flex;
						justify-content: center;
						align-items: center;

						.iconfont {
							color: #57bf7a;
							margin-right: 10rpx;
						}
					}

					.button {
						width: 150rpx;
						height: 60rpx;
						border: 1rpx solid #57bf7a;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 30rpx;
					}
				}

				.counts {
					width: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 50rpx 0;
					border-bottom: 1rpx solid #f4f4f4;

					.count-item {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						font-size: 28rpx;

						.count-num {
							font-size: 35rpx;
						}

						.count-title {
							color: #999;
						}
					}
				}
			}

			.intro {
				font-size: 25rpx;
				width: 90%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				color: #fff;
				margin: 20rpx auto;

				.desc {
					width: 100%;
				}

				.iconfont {
					font-size: 35rpx;
					color: #fff;
				}
			}

			.brand-info {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 90%;
				margin: 0 auto;
				margin-top: 150rpx;

				.business {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.bus-left {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.avatar {
							width: 120rpx;
							height: 120rpx;
							border-radius: 20rpx;
							margin-right: 20rpx;
							border: 1rpx solid #fff;
						}

						.auth {
							display: flex;
							align-items: flex-start;
							justify-content: center;
							flex-direction: column;
							color: #fff;

							.nickname {
								font-size: 35rpx;
								margin-bottom: 10rpx;
							}

							.attestation {
								padding: 2rpx 10rpx;
								margin-left: 10rpx;
								background-color: rgba(#000, 0.5);
								font-size: 20rpx;
								color: #fff;
								border-radius: 10rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								position: relative;

								image {
									width: 30rpx;
									height: 30rpx;
									border-radius: 50%;
									left: -10rpx;
									position: absolute;
									border: 1rpx solid #fff;

								}

								.unauth {
									filter: grayscale(100%);
								}

								.authtext {
									margin-left: 25rpx;
								}
							}
						}
					}

					.bus-right {
						display: flex;
						justify-content: center;
						align-items: center;

						.iconfont {
							font-size: 38rpx;
							color: #fff;
							margin-right: 20rpx;
						}

						.subscribe {

							display: flex;
							justify-content: center;
							align-items: center;
							width: 130rpx;
							height: 60rpx;
							background-color: $uni-color-primary;
							color: #fff;
							font-size: 25rpx;
							border-radius: 30rpx;

							.add {
								font-weight: bold;
								font-size: 35rpx;
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
